<template>
	<view class="bargain_goods_item" @click="onPageJump">
	    <view class="bargain_goods_bg"></view>
	    <view class="bargain_goods_desktop"></view>
	    <view class="bargain_goods_info">
	        <image :src="item.img" mode="aspectFill"></image>
	        <view class="info">
	            <view class="name_people">
	                <view class="name">{{item.name}}</view>
	                <view class="people">
	                    <text>砍{{item.needCutCount}}刀</text>
	                    <!-- <view></view>
	                    <text>99人正在砍价</text -->
	                </view>
	            </view>
	            <button class="goods_btn">发起砍价 {{item.cutMinPrice}}</button>
	        </view>
	    </view>
	    <view v-if="index != 0" class="desktop_left"></view>
	    <view v-if="index != 0" class="desktop_right"></view>
	</view>
</template>
<script>
	export default {
		props: {
			item: {
				type: Object,
				default () {
					return {};
				}
			},
			index: {
				type: Number,
				default () {
					return 0;
				}
			}
		},
		methods: {
			onPageJump() {
				uni.navigateTo({
					url: "/pages/home/shop/goodsDetail?objId=" + this.item.objId
				});
			},
			onAttend(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.bargain_goods_item {
	    position: relative;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    padding-bottom: 60rpx;
	    height: 264rpx;
	    width: 100vw;
	
	    .desktop_left {
	        position: absolute;
	        top: 0;
	        bottom: 0;
	        left: 35rpx;
	        width: 17rpx;
	        background-color: $viceColor3;
	    }
	
	    .desktop_right {
	        position: absolute;
	        top: 0;
	        bottom: 0;
	        right: 35rpx;
	        width: 17rpx;
	        background-color: $viceColor3;
	    }
	
	    .bargain_goods_bg {
	        background-image: linear-gradient(0deg, $viceColor4 0%,  #ffffff 100%);
	        border-radius: 20rpx 20rpx 0rpx 0rpx;
	        flex: 1;
	        width: 646rpx;
	        z-index: 2;
	    }
	
	    .bargain_goods_desktop {
	        position: absolute;
	        bottom: 0;
	        left: 20rpx;
	        width: 710rpx;
	        height: 60rpx;
	        flex-shrink: 0;
	        z-index: 2;
	        @include bis("../../../static/icon/theme/ic_base.png");
	    }
	
	    .bargain_goods_info {
	        position: absolute;
	        top: 0;
	        left: 35rpx;
	        right: 35rpx;
	        bottom: 0;
	        z-index: 3;
	        display: flex;
	        padding: 24rpx 41rpx 40rpx 40rpx;
	
	        image {
	            width: 200rpx;
	            height: 200rpx;
	        }
	
	        .info {
	            margin-left: 30rpx;
	            display: flex;
	            flex-direction: column;
	            justify-content: space-between;
                flex: 1;
	
	            .name_people {
	                display: flex;
	                flex-direction: column;
	
	                .name {
	                    font-size: 28rpx;
	                    color: #333333;
                        @include bov(2);
	                }
	
	                .people {
	                    display: flex;
	                    align-items: center;
	                    font-size: 24rpx;
	                    color: $viceColor3;
                        margin-top: 12rpx;
	
	                    text {
	                        &:nth-child(2) {
	                            margin-left: 30rpx;
	                        }
	                    }
	                }
	            }
	
	            .goods_btn {
	                height: 62rpx;
	                line-height: 62rpx;
                    border-radius: 32rpx;
	                @include theme('bargin_bg');
	               // box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(123, 0, 0, 0.2);
	                font-size: 24rpx;
	                color: #ffffff;
                    border: solid 2rpx #ffffff;
	            }
	        }
	    }
	}
</style>
